<template>
  <div class="leftBottom-content" v-if="pageFlag">
    <component :is="components" :class-option="defaultOption" :data="dataList">
      <li v-for="(item,index) in dataList" :key="index">
        <span class="li-index">{{ index + 1 }}</span>
        <div class="li-content">
          <div class="content-main">
            <div class="main-left">
              <div>
                <p>产品：</p>
                <span class="one-span">{{ item.materialName }}</span>
              </div>
              <div>
                <p>型号：</p>
                <span class="two-span">{{ item.materialModel }}</span>
              </div>
              <div>
                <p>规格：</p>
                <span class="three-span">{{ item.materialSpecification }}</span>
              </div>
              <div>
                <p>单位：</p>
                <span class="three-span">{{ item.materialUnit }}</span>
              </div>
              <div>
                <p>库存：</p>
                <span>{{ item.totalInventory }}</span>
              </div>
              <div>
                <p>已生产：</p>
                <span>{{ item.productQuantity }}</span>
              </div>
              <div>
                <p>待生产：</p>
                <span>{{ item.requireQuantity }}</span>
              </div>
              <div>
                <p>碳排放：</p>
                <span>{{ item.totalCarbonEmission }}</span>
              </div>
            </div>
           </div>
          <div class="content-border"></div>
        </div>
      </li>
    </component>
  </div>
  <reacquire v-else @click="getData"></reacquire>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules' 
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      components:vueSeamlessScroll,
      defaultOption:{
        ...this.$store.state.setting.defaultOption,
        step:0,
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        singleHeight:250
      },
      dataList:[],
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      currentGET('big12',{
        pageNum:1,
        pageSize:20
      }).then(res=>{
        if (res.success) {
          this.dataList = res.rows
          this.pageFlag = true
          const timer = setTimeout(()=>{
            clearTimeout(timer)
            this.defaultOption.step = this.$store.state.setting.defaultOption.step
          },this.$store.state.setting.defaultOption.waitTime)
        }else{
          this.pageFlag = false
        }
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.leftBottom-content{
  width: 80%;
  height: 95%;
  margin-top: 5px;
  margin: auto;
  overflow: hidden;

  li{
    display: flex;
    justify-content: space-around;
    align-items: center;

    .li-index{
      width: 10%;
    }

    .li-content{
      width:90%;
      display: flex;
      flex-direction: column;

      .content-main{
        display: flex;
        justify-content: space-between;
        .main-left{
          width:100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;


          div{
            width: 25%;
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            p{
              color: gray;
              font-size: 14px;
            }

            span{
              font-size: 15px;
            }

            .one-span{
              color: #01AAFF;
              font-size: 18px;
            }
            .two-span{
              font-size: 18px;
            }
            .three-span{
              color: #ff9901;
              font-size: 18px;
            }
          }
        }
      }
      .content-border{
        width: 100%;
        height: 2px;
        background-size: cover;
        background-image: url('../../assets/img/zuo_xuxian.png');
        margin-bottom: 15px;
      }
    }
  }
}
</style>